<template>
  <el-upload
    class="avatar-uploader"
    action=""
    :show-file-list="false"
    :before-upload="beforeAvatarUpload"
    :http-request="uploadImg"
  >
    <img v-if="value" :src="value" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon" />
  </el-upload>
</template>

<script>

/**
 * SecretId: AKIDiFVUDfqkNjocBTVLuDG1VieIfla8QQBf
 * SecretKey: FDvLUN1OUJrGOFp9E3bttc4F9m7ByTih
 */

// 1、下载腾讯云的sdk，引入
// 2、el-upload传递一个http-request属性 >> 值为上传的方法【需要自己在methods里面定义】
// 3、上传的方法定义好之后，方法内部需要先进行腾讯云的鉴权【传入SecretId和SecretKey】
// 4、得到一个cos实例化对象，调用putObject方法，进行文件上传【文档里面的方法直接复制，我们修改参数即可】
// 5、存储桶名称，地域名称，文件名称，文件对象
// 6、回调函数里面获取到上传的结果，data里面是有上传成功之后的链接的。

import COS from 'cos-js-sdk-v5' // 腾讯云提供的sdk
export default {
  name: 'UploadImage',
  props: {
    // 图片的地址
    value: String
  },
  methods: {
    beforeAvatarUpload(file) {
      console.log(file)
      // 文件类型图片：jpeg,png,gif,bmp file.type 字节 >> M
      const isImg = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp'].includes(file.type)
      // 图片的大小
      const maxSize = 5 * 1024 * 1024 // 5M
      const isLimitSize = file.size < maxSize
      // 如果不是图片类型进行错误提示
      if (!isImg) {
        this.$message.error('请上传图片类型')
      }
      // 如果图片过大进行错误提示
      if (!isLimitSize) {
        this.$message.error('文件太大')
      }
      // 如果校验通过，返回true
      // 如果失败，返回false
      return isImg && isLimitSize
    },
    uploadImg({ file }) {
      // console.log(file)
      // 理解为身份认证
      const cos = new COS({
        SecretId: 'AKIDiFVUDfqkNjocBTVLuDG1VieIfla8QQBf',
        SecretKey: 'FDvLUN1OUJrGOFp9E3bttc4F9m7ByTih'
      })
      // 通过得到的cos实例进行文件上传 >> 腾讯云服务器
      cos.putObject({
        Bucket: 'wuxiaohui-1254415986', /* 存储桶的名称*/
        Region: 'ap-nanjing', /* 存储桶所在地域，例如ap-beijing，必须字段 */
        Key: file.name, /* 文件的名称,真实的上传的文件名称 */
        Body: file, /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
        onProgress: function(progressData) { // 上传的过程中提示上传进度
          console.log(JSON.stringify(progressData))
        }
      }, (err, data) => {
        // 拿到上传完成之后图片的存储路径，提交给我们自己的接口服务器
        // err错误对象，如果他有值，证明上传失败，如果他没有值，上传成功，成功之后的结果是在data里面
        if (err) return
        //   需要通知父组件更新头像数据
        //   父组件给子组件提供了一个input事件，用户更新头像数据
        this.$emit('input', `https://${data.Location}`)
      })

      // console.log(file)
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
